import React, { Component } from 'react';
import Slider from './components/slider';
import './App.css';
import { debounce } from './utils';

export default class App extends Component {

  state = {
    silderValue: 0,
  };

  onSliderChange (newValue) {
    this.setState({
      silderValue: newValue,
    });
  }

  // 加入防抖功能
  onChangeDebounce = debounce((newValue) => {
    console.log(newValue);
  }, 500);

  render () {

    return (
      <>
        <Slider
          // v-model
          value={ this.state.silderValue }
          onChange={ (newValue) => {
            this.onSliderChange.call(this, newValue);
            this.onChangeDebounce.call(this, newValue);
          } }
        />
      </>
    );
  }

}
